<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/commons/global.jsp"%>

<script type="text/javascript"
	src="${baseUrl}/resources/qiniu/plupload.full.min.js"></script>
<script type="text/javascript"
	src="${baseUrl}/resources/qiniu/qiniu.min.js"></script>

<div id="video-info-not-entity-win" class="easyui-window" title="添加视频集"
	style="width: 1000px; height: 500px"
	data-options="iconCls:'icon-cog',modal:true,openAnimation:'fade',closeAnimation:'slide',cache:false,collapsible:false,minimizable:false,maximizable:false">

	<form id="video-info-not-entity-win-form" method="post"
		style="width: 500px; height: 400px; margin: 10px auto;"
		enctype="multipart/form-data">
		<input id="video-info-not-entity-win-form-title" type="text"
			name="title">

		<div id="video-info-not-entity-win-form-cover-container">
			<a id="video-info-not-entity-win-form-cover-a" href="javascript:;">
				<input id="video-info-not-entity-win-form-cover" type="text"
				name="coverFile">
			</a>
		</div>

		<input id="video-info-not-entity-win-form-coverUrl" name="coverUrl"
			style="display: none;" /> <input
			id="video-info-not-entity-win-form-summary" type="text"
			name="summary"> <input
			id="video-info-not-entity-win-form-info" type="text" name="info">
		<input type="text" name="entity" value="0" style="display: none;">
		<input type="button" value="确定增加" onclick="upload()" />
	</form>

</div>

<!--封面上传 -->
<script type="text/javascript">
	var notEntityVideoCoverUploader = undefined;

	$(function() {
		// 引入Plupload 、qiniu.js后
		notEntityVideoCoverUploader = new QiniuJsSDK()
				.uploader({
					runtimes : 'html5,flash,html4', //上传模式,依次退化
					browse_button : 'video-info-not-entity-win-form-cover-a', //上传选择的点选按钮，**必需**  需要修改 自己指定
					// 		uptoken_url : '/token', //Ajax请求upToken的Url，**强烈建议设置**（服务端提供）
					uptoken : '${imgBucketToken}', //若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成    需要修改
					// unique_names: true, // 默认 false，key为文件名。若开启该选项，SDK为自动生成上传成功后的key（文件名）。
					// save_key: true,   // 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`，则开启，SDK会忽略对key的处理
					domain : '${imgBucketDomain}', //bucket 域名，下载资源时用到，**必需**  需要修改
					get_new_uptoken : false, //设置上传文件的时候是否每次都重新获取新的token  
					container : 'video-info-not-entity-win-form-cover-container', //上传区域DOM ID，默认是browser_button的父元素，    需要修改
					max_file_size : '10mb', //最大文件体积限制    需要修改
					filters : {
						mime_types : [ {
							title : "Image files",
							extensions : "jpg,jpeg,gif,png"
						} ]
					},
					flash_swf_url : '${baseUrl}/resources/qiniu/Moxie.swf', //引入flash,相对路径    需要修改
					max_retries : 3, //上传失败最大重试次数
					dragdrop : true, //开启可拖曳上传
					drop_element : 'video-info-not-entity-win-form-cover-container', //拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
					chunk_size : '4mb', //分块上传时，每片的体积
					auto_start : false, //选择文件后自动上传，若关闭需要自己绑定事件触发上传    需要修改 改成手动触发
					init : {
						'FilesAdded' : function(up, files) {
							plupload.each(files, function(file) {
								// 文件添加进队列后,处理相关的事情
								$('#video-info-not-entity-win-form-cover')
										.textbox({
											value : files[0].name
										});
							});
						},
						'BeforeUpload' : function(up, file) {
							// 每个文件上传前,处理相关的事情
						},
						'UploadProgress' : function(up, file) {
							// 每个文件上传时,处理相关的事情
							var done = up.total.loaded, total = up.total.size;
							$.messager.progress({
								msg : "图片文件上传进度",
								text : (Math.floor(done / total * 1000) / 10)
										+ '%',
								interval : 0
							});
							$.messager.progress('bar').progressbar('setValue',
									(Math.floor(done / total * 1000) / 10));
						},
						'FileUploaded' : function(up, file, info) {
							$.messager.progress('close');
							//$.messager.alert('提示', '封面上传成功', 'info');
							$('#video-info-not-entity-win-form-coverUrl').val(
									eval('(' + info + ')').key);

							$('#video-info-not-entity-win-form').submit();

							// 每个文件上传成功后,处理相关的事情
							// 其中 info 是文件上传成功后，服务端返回的json，形式如
							// {
							//    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
							//    "key": "gogopher.jpg"
							//  }
							// 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html

							// var domain = up.getOption('domain');
							// var res = parseJSON(info);
							// var sourceLink = domain + res.key; 获取上传成功后的文件的Url
						},
						'Error' : function(up, err, errTip) {
							$.messager.alert('提示', '出错', 'error');
							//上传出错时,处理相关的事情
						},
						'UploadComplete' : function() {
							//队列文件处理完毕后,处理相关的事情
						},
						'Key' : function(up, file) {
							// 若想在前端对每个文件的key进行个性化处理，可以配置该函数
							// 该配置必须要在 unique_names: false , save_key: false 时才生效
							return getToken('jilefojing-img', 'video/cover',
									file.name.substring(file.name
											.lastIndexOf('.') + 1)).data.key;
						}
					}
				});
	});

	// domain 为七牛空间（bucket)对应的域名，选择某个空间后，可通过"空间设置->基本设置->域名设置"查看获取

	// uploader 为一个plupload对象，继承了所有plupload的方法，参考http://plupload.com/docs
</script>

<script type="text/javascript">
	function getToken(type, extral, suffix) {
		var data = undefined;
		$.ajax({
			async : false,
			url : baseUrl + '/upload/token/' + type + '?suffix=' + suffix
					+ '&extral=' + extral,
			success : function(dataR) {
				data = dataR;
			}
		});
		return data;
	}
</script>

<script type="text/javascript">
	function upload() {
		var title = $('#video-info-not-entity-win-form-title').textbox(
				'getValue');
		var summary = $('#video-info-not-entity-win-form-summary').textbox(
				'getValue');
		// 						var info = $('#video-info-not-entity-win-form-info').textbox(
		// 								'getValue');
		if (!title) {
			$.messager.alert('提示', '请填写标题', 'warning');
			return;
		} else if (title.lenght > 50) {
			$.messager.alert('提示', '标题长度不能大于50个字', 'warning');
			return;
		}

		if (summary && summary.lenght > 200) {
			$.messager.alert('提示', '简介不能超过200字', 'warning');
			return;
		}

		if (!notEntityVideoCoverUploader || !notEntityVideoCoverUploader.files
				|| !notEntityVideoCoverUploader.files.length) {
			$.messager.alert('提示', '请选择封面', 'warning');
			return;
		}

		notEntityVideoCoverUploader.start();
	}

	$(function() {
		$('#video-info-not-entity-win-form').form({
			url : baseUrl + '/video/add',
			iframe : false,
			onSubmit : function(param) {

			},
			onProgress : function(percent) {
				$.messager.progress({
					value : percent
				});
			},
			success : function(data) {
				$.messager.progress('close');

				data = eval('(' + data + ')');
				if (data.responseCode == '000') {
					$.messager.alert('提示', '添加成功', 'info');
				} else {
					$.messager.alert('提示', data.responseMessage, 'error');
				}
			}
		});

		$('#video-info-not-entity-win-form-title').textbox({
			buttonAlign : 'left',
			buttonText : '标&nbsp;&nbsp;题',
			width : 400,
			height : 40
		});

		$('#video-info-not-entity-win-form-summary').textbox({
			buttonAlign : 'left',
			buttonText : '概&nbsp;&nbsp;要',
			width : 400,
			height : 100,
			multiline : true
		});

		$('#video-info-not-entity-win-form-info').textbox({
			buttonAlign : 'left',
			buttonText : '详&nbsp;&nbsp;情',
			width : 400,
			height : 200,
			multiline : true
		});

		$('#video-info-not-entity-win-form-cover').textbox({
			buttonAlign : 'right',
			buttonText : '上传封面',
			width : 400,
			height : 30,
			prompt : '选择封面图片',
			accept : 'image/bmp,image/png,image/gif,image.jpg,image/jpeg'
		});

		var video_info_win = $('#video-info-not-entity-win').window({
			onBeforeClose : function() {

			},
			onClose : function() {
				video_info_win.panel('destroy');
			}
		});

	});
</script>
